<template>
  <div>
    <a-card>
      <div v-if="mod=='normal'">
        <a-space class="operator">
          <a-button @click="add" type="primary" style="margin-bottom:20px;" v-auth="`add`">新建</a-button>
        </a-space>
        <standard-table
          rowKey="id"
          :loading='loading'
          :columns="columns"
          :dataSource="dataSource"
          :expandedRowKeys='expandedRowKeys'
          @clear="onClear"
          @change="onChange"
          :pagination="false"
        >
          <div slot="status" slot-scope="{record}">
            <div style="display:flex;align-items: center;">
              <div style="width:6px;height:6px;border-radius:50%;background-color:#ff7875" v-if="record.status==0"></div>
              <div style="width:6px;height:6px;border-radius:50%;background-color:#00cc63" v-else></div>
              <span style="margin-left:5px">{{record.status | setStatus}}</span>
            </div>
          </div>
          <div slot="action" slot-scope="{record}" >
            <a style="margin-right: 8px" @click="edit(record.id)" href="javascript:;" v-auth="`edit`">
              <a-icon type="edit"/>编辑
            </a>
            <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm='deleteRecord(record.id)' v-auth="`delete`">
              <a href="javascript:;">
                <a-icon type="delete" />删除
              </a>
            </a-popconfirm>
          </div>
        </standard-table>
      </div>
      <div v-if="mod=='add'">
        <groupAdd :mod.sync="mod" />
      </div>
      <div v-if="mod=='edit'">
        <groupEdit :mod.sync="mod" :id="detail_id"/>
      </div>
    </a-card>
  </div>
</template>

<script>
import {getGroups,deleteGroup} from '@/api/modules/permission'
import StandardTable from '@/components/table/StandardTable'
import {groupAdd,groupEdit} from './groupComponents'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '权限组标题',
    dataIndex: 'title',
  },
  // {
  //   title: '权限',
  //   dataIndex: 'auths',
  // },
  {
    title: '备注',
    dataIndex: 'remark',
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  data(){
    return{
      mod:"normal",
      loading:false,
      columns: columns,
      dataSource:[],
      expandedRowKeys:[],
      detail_id:''
    }
  },
  created(){
    this.getGroups()
  },
  methods:{
    getGroups(){
      this.loading = true
      getGroups({}).then((res) => {
        this.loading = false
        if(res.errcode == 0){
          this.dataSource = res.data
        }
      }).catch(() => {
        this.loading = false
      });
    },
    deleteRecord(id){
      this.loading = true
      deleteGroup({id}).then(() => {
        this.getGroups()
      }).catch(()=>{
        this.loading = false
      });
    },
    add(){
      this.mod = 'add'
    },
    edit(id){
      this.mod = 'edit'
      this.detail_id = id
    },
    onClear() {
      this.$message.info('您清空了勾选的所有行')
    },
    onChange(e) {
      this.page = e.current
      this.init()
    },
  },
  filters:{
    setStatus(e){
      switch(e){
        case 1: case '1':
          return '有效'
        case 0: case '0':
          return '失效'
      }
    }
  },
  watch:{
    mod(e){
      if(e=='normal'){
        this.getGroups()
      }
    }
  },
  components:{StandardTable,groupAdd,groupEdit}
}
</script>

<style lang="less" scoped>

</style>